<template>
	<view class="page page-fill" >
		<view class="book-wrap">
			<himg  class="book-img" :src="bookData.picUrl" v-if="bookData.picUrl" errorSrc="https://images-cdn.shimo.im/H4AX9SIW6W4xGH0M/noimg.jpg__thumbnail"></himg>
			<view class="book-info">
				<view class="book-title">{{bookData.bookName}}</view>
				<view class="book-desp">{{bookData.authorName}}·{{bookData.wordCount > 10000 ? (bookData.wordCount/10000).toFixed(2) + '万字':bookData.wordCount + '字'}}·{{bookData.status == 0?'连载':'完结'}}</view>
				<view class="book-num">
					<view class="num">1256</view>
					<view class="tit">总点击数</view>
				</view>
				<button class="btn" @click="startread">阅读</button>
			</view>
		</view>
		<view class="bookInfoBox">
			<view class="infoTitle">
				<view class="title">简介<view class="tab">{{bookData.catName}}</view></view>
			</view>
			<view class="introBox">
				<view v-html="bookData.bookDesc"></view>
			</view>
		</view>
		<view class="bookInfoBox">
			<view class="infoTitle">
				<view class="title">热门书评</view>
				<view class="more">更多<uni-icons type="forward" size="14" color="#B3B3B3"></uni-icons></view>
			</view>
			<view class="introBox">
			</view>
		</view>
		<view class="bookInfoBox">
			<view class="infoTitle">
				<view class="title">作者专栏</view>
			</view>
			<view class="introBox">
			</view>
		</view>
		<view class="bookInfoBox">
			<view class="infoTitle">
				<view class="title">最新章节</view>
			</view>
			<view class="introBox">
				{{newchapter}} 
			</view>
		</view>
		<view class="bookInfoBox" v-if="clist.length>0">
			<view class="infoTitle">
				<view class="title">书籍目录</view>
			</view>
			<view class="introBox">
				<uni-list>
					<uni-list-item showArrow v-for="(item,index ) in clist" :key="index" :title="item.indexName" clickable @click="gotoreadChapter(item)" />
				</uni-list>
			</view>
		</view>
		<uni-loading  :status="status" :contentText="contentText" v-else></uni-loading>
	</view>
</template>

<script>
export default {
	data() {
		return {
			bookData:{},
			clist:[],
			fictionid:'',
			title:'',
			bookIndexId:'',
			newchapter:'',
			indexurl:'',
			status:'loading',
			contentText: {
				contentdown: '查看更多',
				contentrefresh: '正在读取书籍目录...',
				contentnomore: '目录加载失败...'
			}
		};
	},
	onNavigationBarButtonTap(val) {
		if(val.float == "right"){
			this.joinshelf();
		}
	},
	onLoad(e) {
		let fid = e.fictionid;
		this.fictionid = fid;
		this.title = e.title;
		uni.setNavigationBarTitle({
			title:e.title
		});
		if(!(fid == undefined)){
				this.getOneBook(fid);
		}
		var me = this;
		me.webhttp(me.websiteUrl + '/book/addVisitCount',{'bookId':fid},'POST');
	
	},
	methods: {
		gotoreadChapter(item){
			uni.navigateTo({
				url:'../readbook/readbook?fictionid='+this.fictionid+'&bookIndexId='+item.id+'&indexNum='+item.indexNum+'&indexurl='+this.indexurl+"&corder="+item.corder+'&title='+item.indexName
			})
			
		},
		//获取缓存书籍的章节
		getcachebookcorder(){
			var me =this;
			var bookObj = null;
			var cachemap = uni.getStorageSync("cachebookchapter");
			if(cachemap == "" || cachemap == null || cachemap==undefined){
				cachemap=[];
			}
			if(cachemap.length == 0)return bookObj;
			for(let i=0; i<cachemap.length;i++){
				if(cachemap[i].key == me.fictionid){
					bookObj = cachemap[i].value;
					break;
				}
			}
			return bookObj;
			
		},
		//加入书架的操作
		joinshelf(){
			var me = this;
			var mysjbook =  uni.getStorageSync("mybooklist");
			 
			if(mysjbook == null || mysjbook =="" || mysjbook == undefined){
				mysjbook = [];
				mysjbook.push(me.bookData);
				
				uni.setStorageSync("mybooklist",mysjbook);
				uni.showToast({
					title:'加入成功！'
				});	
				return;
			}
			var fid = me.bookData.id;
			var isexist = false;
			//判断是否添加过
			for(let i = 0;i<mysjbook.length;i++){
				let cid = mysjbook[i].id;
				if(fid == cid){
					isexist = true;
					uni.showToast({
						title:'本书已在书架中！'
					});	
					return;
				}
			}
			if(!isexist){
				mysjbook.push(me.bookData);
				uni.showToast({
					title:'添加成功！'
				});	
			}
			uni.setStorageSync("mybooklist",mysjbook);
			console.log(mysjbook);
		},
		startread(){
			var me =this;
			if(me.clist.length==0)return; // 等于0说明正在加载，正在加载不能加入书架。 
			
			let bookObj = this.getcachebookcorder();
			//console.log("缓存的章节=="+ccorder);
			if(bookObj != null){
				uni.navigateTo({
					url:'../readbook/readbook?fictionid='+bookObj.bookId+'&bookIndexId='+bookObj.bookIndexId+'&indexNum='+bookObj.indexNum+'&title='+bookObj.title
				})
			}else{
				uni.navigateTo({
					url:'../readbook/readbook?fictionid='+me.fictionid+'&bookIndexId='+me.bookIndexId+'&indexNum='+1+'&title='+me.title
				})
			}
			
		},
		getOneBook(fictionid){
			var me = this;
			var url = me.websiteUrl + "/book/queryBookDetail/"+fictionid;
			
			me.webhttp(url,{fictionid}).then(res=>{
				 
				if(res.code == 200){
					me.bookData = res.data;
					console.info(me.bookData);
					me.bookId =  me.bookData.id;
					me.getBookChapter(me.bookId);
				} 
			});
			
			var url = me.websiteUrl + "/book/queryFirstBookIndexId/"+fictionid;
			me.webhttp(url,{}).then(res=>{
				if(res.code == 200){
					me.bookIndexId = res.data;
				} 
			});
		},
		//获取书籍的章节列表，如果获取完成缓存下来，要不然真的很伤
		getBookChapter(bookId){
			var me = this;
			var url = me.websiteUrl + '/book/queryNewIndexList';
			me.webhttp(url,{bookId}).then(res=>{
				if(res.code == 200){
					if(res.data.length == 0){
						me.status = "nomore";
					}
					me.clist = res.data;
					me.newchapter = me.clist[0].indexName;
				}
			});
		}
	}
};
</script>

<style scoped lang="scss">
.page{
	background: #E6E0CF;
	overflow-y: scroll;
}
.book-wrap{
	padding: 35rpx 24rpx 40rpx;
	display: flex;
	.book-img{
		width: 240rpx;
		height: 320rpx;
		margin-right: 30rpx;
	}
	.book-info{
		flex: 1;
		.book-title{
			font-size: 40rpx;
			font-weight: 600;
			color: #111;
			line-height: 56rpx;
		}
		.book-desp{
			font-size: 30rpx;
			color: #666;
			line-height: 48rpx;
			margin: 12rpx 0 24rpx; 
		}
		.book-num{
			.num{
				font-size: 34rpx;
				color: #333;
				line-height: 34rpx;
				margin: 0 0 12rpx;
			}
			.tit{
				font-size: 22rpx;
				color: #666666;
				line-height: 30rpx;
			}
		}
		.btn{
			width: 104rpx;
			height: 48rpx;
			background: #FF836F;
			border-radius: 8rpx;
			color: #fff;
			font-size: 24rpx;
			line-height: 48rpx;
			margin: 42rpx 0 0;
			&::after{
				display: none;
			}
		}
	}
}
.bookInfoBox{
	background: #FFFFFF;
	border-radius: 16rpx;
	margin: 0 24rpx 24rpx;
	padding: 24rpx;
	.infoTitle{
		display: flex;
		margin: 0 0 16rpx;
		.title{
			font-size: 34rpx;
			color: #333333;
			line-height: 48rpx;
			font-weight: bold;
			flex: 1;
			.tab{
				display: inline-block;
				border-radius: 2rpx;
				height: 40rpx;
				line-height: 40rpx;
				margin-left: 16rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #666;
				padding: 0 12rpx;
				vertical-align: middle;
				background-color: rgba(0,0,0,0.05);
			}
		}
		.more{
			color: #B3B3B3;
			line-height: 48rpx;
		}
	}
	.introBox{
		font-size: 24rpx;
		color: #666666;
	}
	/deep/ .uni-list{
		.uni-list--border-top,.uni-list--border-bottom{
			display: none;
		}
	}
}
</style>
